<template>
  <div>
    <!-- <header>
      <div class="headerDiv">
        <span class="head_icon"></span>
        <h1 class="title">湖北省安全生产网络培训系统</h1>
      </div>
    </header> -->
    <app-header></app-header>
    <div class="main">
      <h1 class="column">
        <span class="column_icon"></span>{{title}}
      </h1>
      <div style="padding-left:15px;padding-top:20px;">
        <ul class="nav">
          <li style="margin-bottom:15px">
            <span class="content">{{trainClassName}}</span>
          </li>
          <li>
            <span class="optionContent">考试时间:{{examTime}}分钟</span>
          </li>
          <li>
            <span class="optionContent">满分:{{totalScore}}分</span>
          </li>
          <li>
            <span class="optionContent">合格分数:{{passScore}}分</span>
          </li>
          <li>
            <span class="optionContent">总题量:{{num}}题</span>
          </li>
        </ul>
      </div>
      <div class="bottomDiv">
        <label>考试须知</label>
        <p>1.所有题型选中答案后，点击下一题按钮跳转到下一题；</p>
        <p>2.选中答案，未提交试卷前，可以修改答案；</p>
        <p>3.必须在规定的时间内答题。</p>
      </div>
      <span class="btn" @click="enterExam">进入考试</span>
    </div>
  </div>
</template>

<script>
  import { XTable } from "vux";
  import { getExamPolicy, isCanExam } from '@/api/trainClass';
  import Header from "../../components/header";
  export default {
    components: {
      "app-header": Header,
      XTable
    },
    data() {
      return {
        trainClassId: '',
        trainClassName: '',
        examTime: '',
        totalScore: 0,
        passScore: 0,
        num: 0,
        type: 1,
        title: '模拟考试'
      };
    },
    created() {
      let that = this;
      this.trainClassId = this.$route.query.id;
      this.type = this.$route.query.type;
      if (this.type == 1) {
        this.title = '正式考试';
      } else {
        this.title = '模拟考试';
      }
      getExamPolicy({ trainClassId: this.trainClassId }).then(
        response => {
          this.trainClassName = response.trainClassName;
          this.examTime = response.examTime;
          this.totalScore = response.totalScore;
          this.passScore = response.passScore;
          this.num = response.choiceNum + response.mulChoiceNum + response.judgeNum;
        }
      );
    },
    methods: {
      enterExam() {
        if (this.type == 1) {
          isCanExam({ trainClassId: this.trainClassId }).then(response => {
            if (response.result) {
              this.$router.push({ path: '/anwser', query: { id: this.trainClassId, type: this.type } })
            }
            else {
              this.$vux.alert.show({
                content: response.message,
              });
              return;
            }
          }).catch(() => {
          });
        } else {
          this.$router.push({ path: '/anwser', query: { id: this.trainClassId, type: this.type } })
        }
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  header {
    height: 64px;
    background-color: #2269ff;
  }

  .headerDiv {
    padding-top: 28px;
  }

  .title {
    font-size: 18px;
    color: #ffffff;
    text-align: center;
  }

  .head_icon {
    display: inline-block;
    background: url("../../assets/images/back@3x.png") no-repeat;
    background-size: 100% 100%;
    width: 13px;
    height: 22px;
    position: absolute;
    left: 15px;
    top: 29px;
  }

  .main {
    padding: 18px 0px 20px 0px;
    text-align: left;
  }

  .column_icon {
    display: inline-block;
    width: 4px;
    height: 20px;
    background-color: #2269ff;
    border-radius: 2px;
    position: relative;
    left: -12px;
    top: 5px;
  }

  .column {
    font-size: 17px;
    margin-left: 27px;
    margin-bottom: 15px
  }

  .bottomDiv {
    border-top: solid 1px #efeff4;
    border-bottom: solid 1px #efeff4;
    padding: 20px 15px;
  }

    .bottomDiv label {
      display: inline-block;
      font-size: 15px;
      color: #2269ff;
      padding-bottom: 11px;
      font-weight: bold;
    }

    .bottomDiv p {
      font-size: 13px;
      margin-bottom: 5px;
    }

  ul {
    list-style-type: none;
  }

  .nav li {
    margin-bottom: 10px;
  }

  .content {
    font-size: 15px;
    vertical-align: middle;
    font-weight: bold;
  }

  .optionContent {
    font-size: 14px;
    color: #2269ff;
  }

  .btn {
    display: block;
    height: 45px;
    font-size: 17px;
    background-color: #2269ff;
    line-height: 45px;
    width: 230px;
    color: #ffffff;
    text-align: center;
    border-radius: 10px;
    margin: 190px auto 40px;
  }
</style>
